<template>
  <k-view class="rank-reload flex-center" :style="{ width, height }">
    <k-view v-if="loading">
      <k-view class="rank-reload-text">{{ loadingMsg }}</k-view>
    </k-view>
    <k-view v-else>
      <k-view class="rank-reload-image"></k-view>
      <k-view class="rank-reload-text"
        >{{ msg }} <k-view class="rank-reload-text-blue" @click="reload">重新加载</k-view></k-view
      >
    </k-view>
  </k-view>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: '暂无数据，点击',
    },
    loadingMsg: {
      type: String,
      default: '数据加载中...',
    },
    width: {
      type: [String, Number],
      default: '100%',
    },
    height: {
      type: [String, Number],
      default: '100%',
    },
    loading: Boolean,
  },
  methods: {
    reload() {
      this.$emit('reload');
    },
  },
};
</script>

<style lang="less" scoped>
.rank-reload {
  background-color: #ffffff;
  padding-top: 20%;
  padding-bottom: 20%;
  &-image {
    width: 210px;
    height: 210px;
    margin: 32px auto;
    background-size: 210px 210px;
    background-position: center;
    background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/b08ee6a8-b650-4baf-aba9-163092b43060.png');
  }
  &-text {
    font-size: 32px;
    color: rgba(0, 0, 0, 0.6);
    letter-spacing: 0;
    line-height: 44px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    &-blue {
      color: #3377ff;
    }
  }
}
.flex-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}
[theme-mode='black'] {
  .rank-reload {
    background-color: #1c1c1c;
    &-image {
      background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/1b9267d9-704f-4690-b88d-8b504d61fb88.png');
    }
    &-text {
      color: rgba(255, 255, 255, 0.6);
    }
  }
}
</style>
